<template>
  <div>
	  <div>
		  <div style="margin:2% 0;display: inline-block;float: right;">
			<el-button style='margin-left:15px;' size="mini" type="primary" icon="document" @click="select">刷新</el-button>
		  </div>
	  </div>
	  <el-table
		v-loading="tableDataLoading"
	    :data="typeDatas.content"
		row-key="id">
	    <el-table-column
	  	 prop="id"
	  	 label="编号"
	  	 width="80">
	     </el-table-column>
		 <el-table-column
			prop="headImg"
			label="用户头像">
				<template slot-scope="scope">
					<img :src="scope.row.headImg" alt="" width="40" height="40">
				</template>
		  </el-table-column>
	   <el-table-column
	  	prop="userName"
	  	label="用户名">
			<template slot-scope="scope">
			  <span style="color: #4f9dec;cursor: pointer;" @click="updates(scope.row)">{{scope.row.userName}}</span>
			</template>
	    </el-table-column>
		<el-table-column
			prop="content"
			label="评论内容">
		 </el-table-column>
	    <el-table-column
	  	prop="createTime"
	  	label="创建时间">
	    </el-table-column>
	    <el-table-column
	      label="操作"
	  	width="100">
	      <template slot-scope="scope">
	        <el-button
	          size="mini"
	          type="danger"
	          @click="deletes(scope.row)">删除
	        </el-button>
	      </template>
	    </el-table-column>
	  </el-table>
	  <div style="text-align: center;margin-top: 10px;">
	    <el-pagination
	      @size-change="handleSizeChange"
	      @current-change="handleCurrentChange"
	      :page-sizes="[5, 10, 15, 20]"
	      :page-size="size"
	      :current-page="page"
	      layout="total,sizes, prev, pager, next"
	      :total="typeDatas.totalElements">
	    </el-pagination>
	  </div>
  </div>
</template>

<script>
	export default {
	    data() {
	      return {
				size:5,
				page:1,
				name:'',
				img:'',
				form:{
					id:'',
					name:'',
					img:'',
				},
				formLabelWidth:'200px',
				tableDataLoading:false,
				dialogFormVisible1:false,
				dialogFormVisible:false,
				typeDatas:[],
			}
		},
		methods: {
			handleSizeChange (val) {
			  this.size = val
			  this.dataSelect()
			},
			handleCurrentChange (val) {
			  this.page = val
			  this.dataSelect()
			},
			// 刷新
			select(){
				this.page = 1
				this.size = 5
				this.dataSelect()
			},
			// 详情跳转
			updates (row) {
			  this.$router.push({path: '/userDetail', query: {userId: row.userId}})
			},
			// 删除评论
			deletes(row){
				this.$confirm(`确定删除此条信息?`, '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
				  this.$http({
					url: this.$http.adornUrl2('/ameComment/delete'),
					method: 'get',
					params: this.$http.adornParams({
						'id':row.id
					})
				  }).then(({data}) => {
					  this.$message({
						message: '删除成功',
						type: 'success',
						duration: 1500,
						onClose: () => {
						  this.dataSelect()
						}
					  })
				  })
				}).catch(() => {})		
			},
			// 获取评论数据
			dataSelect () {
			  let page = this.page - 1
			  let gameVideoId = this.$route.query.gameVideoId
			  this.tableDataLoading = true
			  this.$http({
				url: this.$http.adornUrl2('/ameComment/list'),
				method: 'get',
				params: this.$http.adornParams({
					'page':page,
					'size':this.size,
					'gameVideoId':gameVideoId
				})
			  }).then(({data}) => {
					this.tableDataLoading = false
					let returnData = data.data;
					this.typeDatas = returnData
			  })
			}
		},
		activated() {
			this.dataSelect()
		}
	  };
</script>

<style>
	
</style>
